<template>
	<div class="container">
		<el-dialog
      v-model="state.dialog.isShowDialog"
      :title="state.dialog.titleObj[state.dialog.type]"  
      label-position="top" 
      width="600px"
    >
      <el-form ref="dialogFormRef" :model="state.ruleForm" :rules="state.ruleRules" label-width="auto">
        <el-form-item label="导航栏名称:" prop="aaaaaa">
          <el-input v-model="state.ruleForm.aaaaaa" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="导航栏名称英文::" prop="bbbbbb">
          <el-input v-model="state.ruleForm.bbbbbb" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="状态:" prop="dddddd">
          <el-select 
            v-model="state.ruleForm.dddddd" 
            style="width: 100%" 
            placeholder="请选择" 
            clearable 
            filterable 
            :disabled="isDisabledFn"
          >
            <el-option  v-for="item in state.statusArr" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序:" prop="cccccc">
          <el-input v-model="state.ruleForm.cccccc" type="number" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
      </el-form>
			<template v-if="!isDisabledFn" #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" size="default" @click="onSubmit">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="addMsg">
import { reactive, onMounted, computed } from 'vue';
import {  } from '/@/api/project/index';
import { statusArr } from '/@/commmon/variate';

const emit = defineEmits(['updateList']);
const state = reactive({
  statusArr: statusArr,
	ruleForm: {
    aaaaaa: '',
    bbbbbb: '',
    cccccc: '',
    dddddd: '',
	},
  ruleRules: {},
	dialog: {
		isShowDialog: false,
    row: null,
		type: '',
		titleObj: {
      'view': '查看',
      'edit': '编辑',
      'add': '新增'
    },
    isDisabled: false
	},
	loading: false
})
const onSubmit = () => {
  const params = {
    ...state.ruleForm
  }
  // if (state.dialog.type === 'add') {
    
  // } else {
    
  // }
}
const getViewDetail = () => {
  const params = {
    id: state.dialog.row.id
  }
	// msgSearchView(params).then((res) => {
  //   if (res.code === 10000) {
  //     state.ruleForm = {
  //       ...res.data
  //     }
  //   }
	// })
}
const openDialog = (type, row) => {
  const typeArr = ['edit', 'view']
	state.dialog.row = row
	state.dialog.type = type
  closeDialog()
  if (typeArr.includes(type)) {
    getViewDetail()
  }
	state.dialog.isShowDialog = true;
};
const closeDialog = () => {
	state.ruleForm = {
    aaaaaa: '',
    bbbbbb: '',
    cccccc: '',
    dddddd: '',
	}
};
const onCancel = () => {
	closeDialog();
	state.dialog.isShowDialog = false;
};
onMounted(() => {})
const isDisabledFn = computed(() => {
  return state.dialog.type === 'view'
})
defineExpose({
	openDialog,
})
</script>
<style scoped lang="scss">
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.el-form-item__content) {
	display: block;
}
</style>
